<div class="vt-padding">
  <h1>Schema</h1>
  <div class ="vt-options">
    <p-dropdown [options]="keyspaces" [(ngModel)]="selectedKeyspace" (onChange)="getShards(selectedKeyspace)" [filter]="true"></p-dropdown>
    <p-dropdown [options]="shards" [(ngModel)]="selectedShard" (onChange)="getTablets(selectedKeyspace, selectedShard)" [filter]="true"></p-dropdown>
    <p-dropdown [options]="tablets" [(ngModel)]="selectedTablet" (onChange)="fetchSchema(selectedKeyspace, selectedTablet)" [filter]="true"></p-dropdown>
  </div>
  <div class="vt-schema-left-container">
    <p-dataTable [value]="schemas" selectionMode="single" emptyMessage="No Schemas for this tablet" [(selection)]="selectedSchema" (onRowSelect)="dialog=true;">
      <header>Tables</header>
      <p-column field="name" header="Name" sortable="true"></p-column>
      <p-column field="primary_key_columns" header="PKs" sortable="true"></p-column>
      <p-column field="data_length" header="Data Length" sortable="true"></p-column>
      <p-column field="row_count" header="# Rows" sortable="true"></p-column>
    </p-dataTable>

    <p-dataTable [value]="vSchemas" emptyMessage="No VSchemas for this keyspace" [(selection)]="selectedVSchema">
      <header>Vindexes</header>
      <p-column field="name" header="Name" sortable="true"></p-column>
      <p-column field="type" header="Type" sortable="true"></p-column>
      <p-column field="params" header="Params" sortable="true"></p-column>
      <p-column field="owner" header="Owner" sortable="true"></p-column>
    </p-dataTable>
  </div>
  <div *ngIf="selectedSchema" class="vt-schema-popup-container">
    <p-dialog [(header)]="selectedSchema.name" [(visible)]="dialog" draggable="" resizable="" width="800">
      <table>
        <tr>
          <td>
            <strong>Data Length:</strong>
          </td>
          <td>
            {{selectedSchema.data_length}}
          </td>
        </tr>
        <tr>
          <td>
            <strong>Row Count:</strong>
          </td>
          <td>
            {{selectedSchema.row_count}}
          </td>
        </tr>
      </table>
      <p-dataTable [value]="selectedSchema.columns" emptyMessage="No Columns for this schema">
        <header>Columns</header>
        <p-column field="index" header="#" sortable="true"></p-column>
        <p-column field="name" header="Name"></p-column>
        <p-column field="pk" header="PK" sortable="true"></p-column>
        <p-column field="vindex" header="Vindex"></p-column>
        <p-column field="sequence" header="Sequence"></p-column>
      </p-dataTable>
      <md-card>
        <h3>Schema:</h3>
        <pre>{{selectedSchema.schema}}</pre>
      </md-card>
    </p-dialog>
  </div>
</div>
